<template>
  <div class="songdetail">
    <audio :src="songUrl" controls="controls"></audio>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      songUrl: "",
    };
  },
  computed: {},
  watch: {},

  methods: {
    getsoogdetail() {
      axios
        .get("http://localhost:3000/song/url?id=" + this.$route.params.id)
        .then((res) => {
          console.log(res);
          this.songUrl = res.data.data[0].url;
          console.log(this.songUrl);
        });
      axios
        .get("http://localhost:3000/lyric?id=" + this.$route.params.id)
        .then((res) => {
          console.log(res);
        });
    },
    gecidetail() {},
  },
  created() {
    this.getsoogdetail();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
audio {
  margin: auto;
  display: block;
  width: 150px;
  height: 250px;
}
</style>